<template>
  <div class="chart"></div>
</template>

<script setup name="LineChart">
// 线状图
import * as echarts from 'echarts'
import useResize from '@/components/Charts/hooks/useResize.js'
import { echartsColors, echartLineColors } from '@/components/Charts/style.js'
import { nextTick } from 'vue'

const { proxy } = getCurrentInstance()
const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        xAxis: [
          '9.1',
          '9.2',
          '9.3',
          '9.4',
          '9.5',
          '9.6',
          '9.7',
          '9.8',
          '9.9',
          '9.10',
          '9.11',
          '9.12',
          '9.13',
          '9.14',
          '9.15',
          '9.16',
          '9.17',
          '9.18',
          '9.19',
          '9.20',
          '9.21',
          '9.22',
          '9.23',
          '9.24',
          '9.25',
          '9.26',
          '9.27',
          '9.28',
          '9.29',
          '9.30'
        ],
        data: [
          {
            name: '西安',
            value: [
              620, 580, 610, 640, 810, 800, 888, 400, 400, 400, 500, 400, 420,
              470, 210, 210, 220, 220, 201, 240, 230, 210, 220, 290, 200, 205,
              240, 230, 444, 322
            ]
          },
          {
            name: '酒泉',
            value: [
              210, 220, 290, 200, 205, 240, 230, 620, 580, 610, 640, 810, 800,
              877, 400, 400, 400, 500, 400, 420, 470, 410, 420, 300, 200, 400,
              420, 470, 321, 323
            ]
          },
          {
            name: '石家庄',
            value: [
              700, 840, 710, 690, 590, 640, 720, 620, 580, 610, 640, 810, 800,
              780, 400, 400, 400, 500, 400, 420, 470, 210, 250, 210, 230, 235,
              240, 230, 121, 434
            ]
          },
          {
            name: '格尔木',
            value: [
              400, 400, 400, 500, 400, 420, 470, 210, 220, 290, 200, 205, 240,
              230, 210, 220, 290, 200, 205, 240, 230, 400, 400, 400, 500, 400,
              420, 470, 342, 422
            ]
          }
        ]
      }
    }
  }
})

const colors = [
  ['rgba(247,221,50,0.25)', 'rgba(247,221,50,0)'],
  ['rgba(13,219,168,0.40)', 'rgba(13,219,168,0)'],
  ['rgba(18,152,235,0.30)', 'rgba(18,152,235,0)'],
  ['rgba(115, 72, 255,0.40)', 'rgba(115, 72, 255,0)']
]

let chartInstance = null

async function chartInit() {
  await nextTick()
  // console.log('chartInit')
  if (!chartInstance) {
    chartInstance = echarts.init(proxy.$el)
  }

  chartInstance = echarts.init(proxy.$el)

  if (!props?.options?.xAxis || !props?.options?.data) {
    return
  }

  // console.log(props.options)

  chartInstance.setOption(
    {
      tooltip: {
        trigger: 'axis',
        borderColor: 'rgba(255,255,255,.3)',
        backgroundColor: 'rgba(13,5,30,.6)',
        borderWidth: 1,
        padding: 5,
        confine: true,
        textStyle: {
          color: '#fff'
        }
      },
      grid: {
        borderWidth: 0,
        top: '15%',
        left: '6%',
        right: '4%',
        bottom: '15%',
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        top: '5%',
        right: '3%',
        textStyle: {
          fontSize: 12,
          fontFamily: 'SourceHanSansCN-Regular',
          color: '#FFFFFF'
        }
      },
      xAxis: [
        {
          type: 'category',

          axisLine: {
            show: true,
            lineStyle: {
              color: '#ffffff'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            interval: 50,
            color: '#fff',
            fontSize: 12,
            rotate: 45
          },
          data: props.options.xAxis
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.5)'
            }
          },
          axisLine: {
            show: false //隐藏X轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: -30,
            color: '#fff',
            fontSize: 12,
            formatter: params => {
              return params + ''
            }
          },
          splitArea: {
            show: false
          }
        }
      ],
      series: props.options.data.map((item, index) => {
        return {
          name: item.name,
          type: 'line',
          smooth: true,
          itemStyle: {
            normal: {
              color: echartLineColors[index],
              barBorderRadius: 0
            }
          },
          areaStyle: {
            opacity: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colors[index][0]
              },
              {
                offset: 1,
                color: colors[index][1]
              }
            ])
          },
          data: item.value
        }
      })
    },
    true
  )
}

onMounted(() => {
  chartInit()
})
// 销毁
onBeforeUnmount(() => {
  chartInstance?.dispose()
})

watch(
  () => props.options,
  () => {
    nextTick(() => {
      chartInit()
    })
  }
)

function resize() {
  chartInstance.resize()
}

useResize(() => {
  resize()
})
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
